import React, {Component} from 'react'
import {
    Text,
    View,
    StyleSheet,
    Button,
    Image,
    FlatList,
    ScrollView,
    StyleProp,
    ViewStyle,
    TextInput, TextStyle, TouchableOpacity
} from 'react-native'
import {statusHeight, default as styles} from "../../style";
import {Actions} from "react-native-router-flux";
import {IS_IOS} from "../../style/constant";

export default class SearchNavBar extends Component {
    public props: { placeholder?: string, style?: StyleProp<ViewStyle>, textStyle?: StyleProp<TextStyle> };
    static defaultProps = {
        placeholder: "请输入商品名称"
    };

    navigateSearchPage() {
        Actions.push("searchPage");
    }

    render() {
        const {placeholder, textStyle, style} = this.props;
        return (
            <View style={[SearchNavBarStyles.container]}>
                <View style={[SearchNavBarStyles.innerContainer, style]}>
                    <TouchableOpacity
                                      style={[styles.centerH, textStyle]} onPress={this.navigateSearchPage}>
                        <Text style={{
                            fontSize: 16,
                            color: "#B2B2B2"
                        }}>{placeholder}</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}


const SearchNavBarStyles = StyleSheet.create({
    container: {
        justifyContent: "center",
        paddingBottom: 10,
        paddingTop: IS_IOS ? statusHeight + 5 : 10,
        paddingHorizontal: 10,
        backgroundColor: "#fff"
    },
    innerContainer: {
        backgroundColor: "#E6E6EA",
        borderRadius: 17,
        paddingHorizontal: 17,
        justifyContent: "center",
        height: 34,

    }

});
